<template>
	<view class="main">
		<view class="boxmax">
			<view class="box" v-for="(v,k) in History" :key="v.id" @tap.stop="goDetail(v)">
				<view class="title">
					<view v-if="isClickId ==''">
						{{v.book_title}}
					</view>
				</view>
				<view class="content">
					{{v.description}}
				</view>
				<view class="bottom">
					<view class="left">
						<view class="wenzi">
							阅读进度
						</view>
						<view class="jindutiao">
							<u-line-progress :percent="v.read_progress" :round="true" active-color="#FF464E"
								inactive-color="#FFB38E" :show-percent="false">
							</u-line-progress>

						</view>
						<view class="num">
							{{v.read_progress}}%
						</view>
					</view>
					<view class="right">
						<image src="@/static/delete.svg" mode="" @tap.stop="del(v)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Books
	} from "@/request/api.js"
	export default {
		name: "ReadHistoy",
		data(){
			return{
				isClickId:uni.getStorageSync("clickid") || '' 
			}
		},
		props: {
			History: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			goDetail(v) {
				uni.navigateTo({
					url: `/pages/Detail/Detail?id=${v.book_id}&chapter_id=${v.chapter_id}`
				// url: `/pages/novel_plugin/index?id=${v.book_id}&chapter_id=${v.chapter_id}`

				})
			},
			async del(v) {
				await Books.DelReadHistoy(v.book_id)
				this.$emit('historyhistory')
			},

		},

	}
</script>

<style lang="less" scoped>
	.main {
		width: 100%;

		.boxmax {
			width: 100%;
			border-bottom: 1rpx solid #F5F5F5;

			.box {
				width: 90%;
				height: 262rpx;
				padding-top: 6rpx;
				margin: auto;
				border-bottom: 1rpx solid @color-disabled;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					margin-top: 20rpx;
				}

				.content {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #999999;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.bottom {
					margin-top: 30rpx;
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-between;

					.left {
						width: 80%;
						display: flex;

						.wenzi {
							font-size: 20rpx;
							background: linear-gradient(180deg, #FFB38E 0%, #FF464E 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							line-height: 60rpx;
						}

						.jindutiao {
							width: 40%;
							line-height: 68rpx;
							margin-left: 20rpx;
						}

						.num {
							font-size: 20rpx;
							line-height: 60rpx;
							color: #FFB38E;
							margin-left: 20rpx;
						}
					}

					.right {
						width: 5%;
						line-height: 60rpx;

						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

	}
</style>